<template>
  <div class="found_container">
    <div class="title">发现</div>

    <div class="category_list">
      <div
        :class="{ active: isActive == index }"
        @click="handleCut(item, index)"
        v-for="(item, index) in showList"
        :key="index"
        class="item"
      >
        {{ item }}
      </div>
    </div>
    <div class="content_wrap">
      <transition name="el-zoom-in-top">
        <div v-show="isShow" class="show_name">
          <div class="show_name_wrap">
            <div class="category_title">语种</div>
            <div class="name_wrap">
              <div
                @click="handleAdd(item1, index1)"
                class="name_list"
                v-for="(item1, index1) in yz"
                :key="index1"
                :class="{ active: showList.indexOf(item1) !== -1 }"
              >
                {{ item1 }}
              </div>
            </div>
          </div>
          <div class="show_name_wrap">
            <div class="category_title">风格</div>
            <div class="name_wrap">
              <div
                @click="handleAdd(item1, index1)"
                class="name_list"
                v-for="(item1, index1) in fg"
                :key="index1"
                :class="{ active: showList.indexOf(item1) !== -1 }"
              >
                {{ item1 }}
              </div>
            </div>
          </div>
          <div class="show_name_wrap">
            <div class="category_title">场景</div>
            <div class="name_wrap">
              <div
                @click="handleAdd(item1, index1)"
                class="name_list"
                v-for="(item1, index1) in cj"
                :key="index1"
                :class="{ active: showList.indexOf(item1) !== -1 }"
              >
                {{ item1 }}
              </div>
            </div>
          </div>
          <div class="show_name_wrap">
            <div class="category_title">情感</div>
            <div class="name_wrap">
              <div
                @click="handleAdd(item1, index1)"
                class="name_list"
                v-for="(item1, index1) in qg"
                :key="index1"
                :class="{ active: showList.indexOf(item1) !== -1 }"
              >
                {{ item1 }}
              </div>
            </div>
          </div>
          <div class="show_name_wrap">
            <div class="category_title">主题</div>
            <div class="name_wrap">
              <div
                @click="handleAdd(item1, index1)"
                class="name_list"
                v-for="(item1, index1) in zt"
                :key="index1"
                :class="{ active: showList.indexOf(item1) !== -1 }"
              >
                {{ item1 }}
              </div>
            </div>
          </div>
        </div>
      </transition>
      <div class="content">
        <div
          v-for="(item, index) in playList"
          :key="index"
          style="position: relative"
          class="image"
        >
          <div @click="ToDetail(item.id)" class="image_wrap">
            <el-image lazy :src="item.picUrl ? item.picUrl : item.coverImgUrl">
            </el-image>

            <div class="play_img">
              <img
                src="@/assets/image/play.svg"
                alt=""
                style="
                  width: 50px;
                  height: 50px;
                  background: #aca8a1;
                  border-radius: 100%;
                  opacity: 0.8;
                "
              />
            </div>
          </div>

          <span class="name">{{ item.name }}</span>
        </div>
      </div>
      <div v-show="isMore" class="more">
        <div @click="getBoutique">加载更多</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getplaylist,
  getRecplaylist,
  getBoutique,
  getRankList,
  getSelect,
  selectList,
} from "@/util/songList.js";
import { mapGetters } from "vuex";
export default {
  name: "Found",
  data() {
    return {
      isActive: 0,
      naem_active: 0,
      visible: false,
      // showList: ["推荐歌单", "网友精选", "精品歌单", "排行榜", "..."],
      playList: [],
      before: "",
      isMore: false,
      isShow: false,
      categories: ["语种", "风格", "场景", "情感", "主题"],
      showNameList: [],
      yz: [],
      fg: [],
      cj: [],
      qg: [],
      zt: [],
    };
  },
  computed: {
    ...mapGetters("songList", ["showList"]),
  },
  created() {
    this.getplaylist();
    this.getSelect();
  },

  methods: {
    //获取歌单分类
    async getplaylist() {
      let { data } = await getplaylist();
      // console.log(data);
      this.showNameList = data.sub;
      // console.log(this.showNameList);
      this.yz = this.showNameList
        .map((v) => (v.category == "0" ? v.name : ""))
        .filter((s) => s.trim());
      this.fg = this.showNameList
        .map((v) => (v.category == "1" ? v.name : ""))
        .filter((s) => s.trim());
      this.cj = this.showNameList
        .map((v) => (v.category == "2" ? v.name : ""))
        .filter((s) => s.trim());
      this.qg = this.showNameList
        .map((v) => (v.category == "3" ? v.name : ""))
        .filter((s) => s.trim());
      this.zt = this.showNameList
        .map((v) => (v.category == "4" ? v.name : ""))
        .filter((s) => s.trim());
    },
    //获取推荐歌单
    async getRecplaylist() {
      let { data } = await getRecplaylist(100);
      if (data.code == 200) {
        this.playList = data.result;
      }
    },
    //获取精品歌单
    async getBoutique() {
      let { data } = await getBoutique(50, this.before);
      if (data.code == 200) {
        this.before = data.lasttime;
        this.playList = [...this.playList, ...data.playlists];
        this.isMore = data.more;
      }
      //   console.log(data);
    },
    //获取排行榜歌单
    async getRankList() {
      let { data } = await getRankList();
      //   console.log(data);
      this.playList = data.list;
    },
    //获取网友精选歌单
    async getSelect() {
      let { data } = await getSelect(100);
      // console.log(data);
      if (data.code == 200) {
        // console.log(data);
        this.playList = data.playlists;
      }
    },
    //通过名字获取歌单
    async selectList(item) {
      let { data } = await selectList(item);
      this.playList = data.playlists;
      // console.log(data);
    },
    //添加分类
    async handleAdd(item, index) {
      if (this.showList.indexOf(item) == -1) {
        this.showList.splice(-1, 0, item);
      } else {
        this.showList.splice(this.showList.indexOf(item), 1);
      }
      //保存歌单分类名称
      localStorage.setItem("showList", JSON.stringify(this.showList));
      // this.$store.commit("SAVE_SHOWLIST",  this.showList);
    },
    //切换歌单分类
    async handleCut(item, index) {
      this.isActive = index;
      this.isMore = false;
      if (item !== "...") {
        this.playList = [];
      }
      this.before = "";
      switch (item) {
        case "...":
          this.isShow = !this.isShow;
          break;
        case "推荐歌单":
          this.getRecplaylist();
          break;
        case "精品歌单":
          this.getBoutique();
          break;
        case "排行榜":
          this.getRankList();
          break;
        case "网友精选":
          this.getSelect();
          break;
        default:
          this.selectList(item);
      }
    },
    //跳转至歌单详情
    ToDetail(id) {
      this.$router.push("/songListDeatil/" + id);
    },
  },
};
</script>

<style lang="less" scoped>
.found_container {
  padding: 0 9rem;
  .title {
    font-size: 55px;
    font-weight: 600;
    margin: 30px 0;
  }
  .category_list {
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    .item {
      margin-right: 20px;
      font-size: 17px;
      font-weight: 600;
      background-color: #f5f5f7;
      padding: 7px 15px;
      border-radius: 8px;
      color: #7a7a7b;
      margin-bottom: 15px;
      &:hover {
        color: #335eea;
        background-color: #eaeffd;
      }
    }
    .active {
      color: #335eea;
      background-color: #eaeffd;
    }
  }
  .content_wrap {
    position: relative;
    margin-top: 30px;
    .el-zoom-in-top-enter-active {
      transition: all 0.5s;
    }
    .el-zoom-in-top-leave-active {
      transition: all 0.5s;
    }
    .show_name {
      // padding: 20px 30px;
      position: absolute;
      width: 100%;
      height: 480px;
      background-color: #f5f5f7;
      z-index: 99;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      cursor: pointer;
      .show_name_wrap {
        padding: 20px 30px;
        display: flex;
        .category_title {
          width: 60px;
          font-size: 22px;
          font-weight: 600;
          color: #4f4f4f;
        }
        .name_wrap {
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          .name_list {
            font-size: 17px;
            color: #333333;
            text-align: left;
            padding: 5px 15px;
            border-radius: 10px;
            margin-bottom: 10px;
            &:hover {
              background-color: #eaeffd;
              color: #335eea;
            }
          }
          .active {
            color: #335eea;
            background-color: #eaeffd;
          }
        }
      }
    }
    .content {
      // display: flex;
      // flex-wrap: wrap;
      display: grid;
      justify-content: space-around;
      grid-template-columns: repeat(auto-fill, 17rem);
      .image {
        margin-bottom: 45px;
        .image_wrap {
          position: relative;
          .el-image {
            border-radius: 10px;
          }
          .play_img {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -25px;
            margin-top: -25px;
            display: none;
            transition: all 1s 1s;
          }
        }
      }
      .image:hover .play_img {
        display: block;
      }
      .name {
        display: block;
        font-size: 16px;
        font-weight: 600;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .more {
      font-size: 18px;
      font-weight: 600;
      display: flex;
      justify-content: center;
      align-items: center;
      div {
        cursor: pointer;
        background-color: #f7f7f9;
        padding: 10px 20px;
        color: #393939;
        border-radius: 10px;
        transition: 0.5s;
        &:active {
          transform: scale(1.1);
        }
      }
    }
  }
}
</style>